<template>
  <div class="app-container">
    <!--    <div id="graph" />-->
    <el-button @click="drawer = true">打开</el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import anchorEvent from '../dashboard/node/anchor-event'
import itemEvents from '../dashboard/node/item-event'
export default {
  data() {
    return {
      graph: null,
      drawer: false
    }
  },
  mounted() {
    // this.initGraph()
  },
  methods: {
    handleClose() {
      this.drawer = false
    },
    register() {
      G6.registerNode('base-node-image', {
        draw(cfg, group) {
          const attrs = cfg
          const { width, height } = attrs.style
          const img = attrs.baseUrl
          const shape = group.addShape('rect', {
            attrs: {
              x: -width / 2,
              y: -height / 2,
              width,
              height,
              fill: '#ffffff',
              radius: 4
            },
            name: 'node-rect',
            className: `node-rect`,
            draggable: true
          })
          group.addShape('image', {
            attrs: {
              ...attrs,
              x: -width / 2,
              y: -height / 2,
              width,
              height,
              img,
              size: [width, height]
            },
            name: 'node-img',
            className: `node-img`,
            draggable: true
          })
          // 添加锚点
          this.initAnchor(cfg, group)

          return shape
        },
        // 绘制锚点
        initAnchor(cfg, group) {
          group.anchorShapes = []
          group.showAnchor = group => {
            this.drawAnchor(cfg, group)
          }
          group.clearAnchor = group => {
            group.anchorShapes && group.anchorShapes.forEach(a => a.remove())
            group.anchorShapes = []
          }
        },
        drawAnchor(cfg, group) {
          const { type, direction, anchorPointStyles } = group.getFirst().attr()
          const item = group.get('children')[0]
          const bBox = item.getBBox()
          const anchors = this.getAnchorPoints(cfg)

          // 绘制锚点坐标
          anchors && anchors.forEach((p, i) => {
            const diff = type === 'triangle-node' ? (direction === 'up' ? 1 : 0) : 0.5
            const x = bBox.width * (p[0] - 0.5)
            const y = bBox.height * (p[1] - diff)

            /**
             * 绘制三层锚点
             * 最底层: 锚点bg
             * 中间层: 锚点
             * 最顶层: 锚点group, 用于事件触发
             */
            const anchorPointStylesNew = anchorPointStyles || {
              fill: '#fff',
              lineWidth: 1,
              r: 4,
              stroke: '#1890FF'
            }
            // 视觉锚点
            const anchor = group.addShape('circle', {
              attrs: {
                x,
                y,
                ...anchorPointStylesNew
              },
              zIndex: 1,
              nodeId: group.get('id'),
              className: 'node-anchor',
              draggable: false,
              isAnchor: true,
              index: i
            })

            // 锚点事件触发的元素
            const anchorGroup = group.addShape('circle', {
              attrs: {
                x,
                y,
                r: 8,
                fill: '#80b9f2',
                opacity: 0
              },
              zIndex: 2,
              nodeId: group.get('id'),
              className: 'node-anchor-group',
              draggable: true,
              isAnchor: true,
              index: i
            })
            /**
             * ! 添加锚点事件绑定
             */
            anchorEvent(anchorGroup, group, p)

            group.anchorShapes.push(anchor)
            group.anchorShapes.push(anchorGroup)
          })

          group.getBashedLine = () => {
            return group.findAllByName('dashed-line')
          }
          // 查找所有锚点
          group.getAllAnchors = () => {
            return group.anchorShapes.filter(c => c.get('isAnchor') === true)
          }
          // 查找指定锚点
          group.getAnchor = (i) => {
            return group.anchorShapes.filter(c => c.get('className') === 'node-anchor' && c.get('index') === i)
          }
          // 查找所有锚点背景
          group.getAllAnchorBg = () => {
            return group.anchorShapes.filter(c => c.get('className') === 'node-anchor-bg')
          }
        },
        /* 更新节点，包含文本 */
        update(cfg, node) {
          const model = node.get('model')
          const { attrs } = node.get('keyShape')
          /* const text = node.get('group').getItem('node-text');
          const item = node.get('group').get('children')[0];*/

          /* setTimeout(() => {
            // 更新文本内容
            text && text.attr({
              text:     model.label,
              labelCfg: attrs.labelCfg,
            });
            // 更新节点属性
            item.attr({ ...attrs, ...model.style });
          });*/
        },
        /* 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现 */
        setState(name, value, item) {

        },
        /* 获取锚点（相关边的连入点） */
        getAnchorPoints(cfg) {
          return cfg.anchorPoints || [
            [0.5, 0],
            [1, 0.5],
            [0.5, 1],
            [0, 0.5]
          ]
        }
      }, 'rect')
    },
    initGraph() {
      // const vm = this
      this.register()
      const grid = new G6.Grid()
      const graph = new G6.Graph({
        container: document.getElementById('graph'),
        width: window.innerWidth - 40,
        height: window.innerHeight - 40,
        defaultNode: {
          type: 'rect'
        },
        defaultEdge: {
          type: 'line'
        },
        // 覆盖全局样式
        nodeStateStyles: {
          'nodeState:default': {
            opacity: 1
          },
          'nodeState:hover': {
            opacity: 0.8
          },
          'nodeState:selected': {
            opacity: 0.9
          }
        },
        // 默认边不同状态下的样式集合
        edgeStateStyles: {
          'edgeState:default': {
            stroke: '#aab7c3'
          },
          'edgeState:selected': {
            stroke: '#1890FF'
          },
          'edgeState:hover': {
            stroke: '#1890FF',
            animate: true
          }
        },
        layout: {
          type: 'xxx'
        },
        modes: {
          default: [
            'drag-node', 'drag-canvas'] //, 'drag-base-edge'
        },
        plugins: [grid]
      })

      this.graph = graph
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

